React useFormStatus: Опанування стану відправки форми

Форми є основою безлічі веб-додатків, слугуючи основним засобом для взаємодії користувачів та передачі даних на сервер. Забезпечення плавного та інформативного процесу відправки форми має вирішальне значення для створення позитивного користувацького досвіду. React 18 представив потужний хук під назвою useFormStatus, призначений для спрощення керування станом відправки форми. Цей посібник надає вичерпний огляд useFormStatus, досліджуючи його можливості, випадки використання та найкращі практики для створення доступних та захопливих форм для глобальної аудиторії.

Що таке React useFormStatus?

useFormStatus — це хук React, який надає інформацію про стан відправки форми. Він розроблений для безшовної роботи з серверними діями (server actions), функцією, що дозволяє виконувати логіку на стороні сервера безпосередньо з ваших компонентів React. Хук повертає об'єкт, що містить інформацію про стан очікування форми, дані та будь-які помилки, що виникли під час відправки. Ця інформація дозволяє надавати користувачам зворотний зв'язок у реальному часі, наприклад, відображати індикатори завантаження, деактивувати елементи форми та показувати повідомлення про помилки.

Розуміння серверних дій

Перш ніж занурюватися в useFormStatus, важливо зрозуміти, що таке серверні дії. Серверні дії — це асинхронні функції, які виконуються на сервері і можуть бути викликані безпосередньо з компонентів React. Вони визначаються за допомогою директиви 'use server' на початку файлу. Серверні дії зазвичай використовуються для таких завдань, як:

• Відправка даних форми до бази даних
• Автентифікація користувачів
• Обробка платежів
• Надсилання електронних листів

Ось простий приклад серверної дії:

            // actions.js
'use server';

export async function submitForm(formData) {
  // Simulate a delay to mimic a server request
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Please fill in all fields.' };
  }

  // Simulate successful submission
  return { message: `Form submitted successfully for ${name}!` };
}

            

              
                Copy
              
            
          

Ця дія приймає дані форми як вхідні, симулює затримку, а потім повертає повідомлення про успіх або помилку. Директива 'use server' повідомляє React, що ця функція повинна виконуватися на сервері.

Як працює useFormStatus

Хук useFormStatus використовується всередині компонента, який рендерить форму. Його потрібно використовувати всередині елемента <form>, який використовує пропс `action` з імпортованою серверною дією. Хук повертає об'єкт з наступними властивостями:

• pending: Булеве значення, що вказує, чи відправляється форма на даний момент.
• data: Дані, які були відправлені з формою. Це значення буде null, якщо форма ще не була відправлена.
• method: HTTP-метод, використаний для відправки форми (наприклад, "POST", "GET").
• action: Функція серверної дії, пов'язана з формою.
• error: Об'єкт помилки, якщо відправка форми не вдалася. Це значення буде null, якщо відправка була успішною або ще не відбувалася. Важливо: помилка не викидається автоматично. Серверна дія повинна явно повернути об'єкт помилки або викинути її.

Ось приклад використання useFormStatus у компоненті React:

            'use client'
import { useFormStatus } from 'react-dom';
import { submitForm } from './actions';

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

            

              
                Copy
              
            
          

У цьому прикладі:

• Ми імпортуємо useFormStatus з 'react-dom' та серверну дію submitForm з ./actions.
• Ми використовуємо useFormStatus для отримання поточного статусу відправки форми.
• Ми деактивуємо поля вводу та кнопку відправки, поки форма знаходиться у стані очікування.
• Ми відображаємо повідомлення про завантаження, поки форма знаходиться у стані очікування.
• Ми відображаємо повідомлення про помилку, якщо відправка форми не вдається.
• Ми відображаємо повідомлення про успіх, якщо відправка форми проходить успішно.

Переваги використання useFormStatus

useFormStatus пропонує кілька переваг для керування станом відправки форми:

• Спрощене керування станом: Усуває необхідність вручну керувати станом завантаження, станом помилки та даними форми.
• Покращений користувацький досвід: Дозволяє надавати користувачам зворотний зв'язок у реальному часі, роблячи процес відправки форми більш інтуїтивним та захопливим.
• Покращена доступність: Деактивуючи елементи форми під час відправки, ви запобігаєте випадковій повторній відправці форми користувачами.
• Безшовна інтеграція з серверними діями: Він спеціально розроблений для роботи з серверними діями, забезпечуючи плавний та ефективний спосіб обробки відправок форм.
• Зменшення шаблонного коду: Зменшує кількість коду, необхідного для обробки відправок форм.

Найкращі практики використання useFormStatus

Щоб максимізувати переваги useFormStatus, враховуйте наступні найкращі практики:

• Надавайте чіткий зворотний зв'язок: Використовуйте стан pending для відображення індикатора завантаження або деактивації елементів форми, щоб запобігти повторним відправкам. Це може бути простий спінер, панель прогресу або текстове повідомлення, наприклад, "Відправляється...". Враховуйте доступність і переконайтеся, що індикатор завантаження належним чином оголошується для програм зчитування з екрана.
• Витончено обробляйте помилки: Відображайте інформативні повідомлення про помилки, щоб допомогти користувачам зрозуміти, що пішло не так і як це виправити. Адаптуйте повідомлення про помилки до мови та культурного контексту користувача. Уникайте технічного жаргону та надавайте чіткі, дієві вказівки.
• Валідуйте дані на сервері: Завжди валідуйте дані форми на сервері, щоб запобігти шкідливому вводу та забезпечити цілісність даних. Валідація на стороні сервера є критично важливою для безпеки та якості даних. Розгляньте можливість впровадження інтернаціоналізації (i18n) для повідомлень про валідацію на стороні сервера.
• Використовуйте прогресивне поліпшення: Переконайтеся, що ваша форма працює, навіть якщо JavaScript вимкнено. Це передбачає використання стандартних елементів форми HTML та відправку форми на кінцеву точку на стороні сервера. Потім поступово покращуйте форму за допомогою JavaScript, щоб забезпечити багатший користувацький досвід.
• Враховуйте доступність: Використовуйте атрибути ARIA, щоб зробити вашу форму доступною для користувачів з обмеженими можливостями. Наприклад, використовуйте aria-describedby для зв'язування повідомлень про помилки з відповідними полями форми. Дотримуйтесь Рекомендацій щодо доступності веб-вмісту (WCAG), щоб ваша форма була зручною для всіх.
• Оптимізуйте продуктивність: Уникайте непотрібних перерендерів, використовуючи React.memo або інші техніки оптимізації. Слідкуйте за продуктивністю вашої форми та виявляйте будь-які вузькі місця. Розгляньте можливість відкладеного завантаження компонентів або використання розділення коду для покращення часу початкового завантаження.
• Впроваджуйте обмеження швидкості (rate limiting): Захистіть свій сервер від зловживань, впровадивши обмеження швидкості. Це запобігатиме занадто частій відправці форми користувачами за короткий проміжок часу. Розгляньте можливість використання таких сервісів, як Cloudflare або Akamai, для обробки обмеження швидкості на межі мережі.

Випадки використання useFormStatus

useFormStatus застосовується в широкому діапазоні сценаріїв:

• Контактні форми: Надання зворотного зв'язку під час відправки та обробка можливих помилок.
• Форми входу/реєстрації: Відображення станів завантаження під час автентифікації та показ повідомлень про помилки для недійсних облікових даних.
• Форми оформлення замовлення в електронній комерції: Відображення індикаторів завантаження під час обробки платежу та обробка помилок, пов'язаних з недійсною інформацією про кредитну картку або недостатніми коштами. Розгляньте інтеграцію з платіжними шлюзами, що підтримують кілька валют та мов.
• Форми введення даних: Деактивація елементів форми під час відправки для запобігання випадковому дублюванню даних.
• Форми пошуку: Відображення індикатора завантаження під час отримання результатів пошуку.
• Сторінки налаштувань: Надання візуальних підказок під час збереження налаштувань.
• Опитування та вікторини: Керування відправкою відповідей та відображення зворотного зв'язку.

Робота з інтернаціоналізацією (i18n)

При створенні форм для глобальної аудиторії інтернаціоналізація (i18n) є вкрай важливою. Ось як працювати з i18n при використанні useFormStatus:

• Перекладайте повідомлення про помилки: Зберігайте повідомлення про помилки у файлі перекладів і використовуйте бібліотеку, таку як react-intl або i18next, для відображення відповідного повідомлення залежно від локалі користувача. Переконайтеся, що повідомлення про помилки є чіткими, лаконічними та культурно доречними.
• Форматуйте числа та дати: Використовуйте API Intl для форматування чисел та дат відповідно до локалі користувача. Це забезпечить відображення чисел та дат у правильному форматі для їхнього регіону.
• Обробляйте різні формати дати та часу: Надайте поля вводу, що підтримують різні формати дати та часу. Використовуйте бібліотеку, таку як react-datepicker, для надання локалізованого вибору дати.
• Підтримуйте мови з письмом справа наліво (RTL): Переконайтеся, що макет вашої форми коректно працює для мов RTL, таких як арабська та іврит. Використовуйте логічні властивості CSS для коригування макета.
• Використовуйте бібліотеку локалізації: Застосовуйте надійну бібліотеку i18n для керування перекладами та обробки форматування, специфічного для локалі.

Приклад з i18next:

            // i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

// MyForm.js

import { useTranslation } from 'react-i18next';

function MyForm() {
  const { t } = useTranslation();
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">{t('name')}:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">{t('email')}:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? t('submitting') : t('submit')}
      </button>
      {error && <p style={{ color: 'red' }}>{t('error')}: {t(error.message)}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{t(data.message)}</p>}
    </form>
  );
}

export default MyForm;

            

              
                Copy
              
            
          

Аспекти доступності

Забезпечення доступності є першочерговим завданням при створенні форм. Ось як зробити ваші форми більш доступними при використанні useFormStatus:

• Використовуйте атрибути ARIA: Використовуйте атрибути ARIA, такі як aria-invalid, aria-describedby та aria-live, щоб надавати семантичну інформацію допоміжним технологіям. Наприклад, використовуйте aria-invalid="true" на полях вводу з помилками валідації та використовуйте aria-describedby для зв'язування повідомлень про помилки з відповідними полями. Використовуйте aria-live="polite" або aria-live="assertive" на елементах, що відображають динамічний вміст, таких як індикатори завантаження та повідомлення про помилки.
• Забезпечте навігацію за допомогою клавіатури: Переконайтеся, що користувачі можуть переміщатися по формі за допомогою клавіатури. Використовуйте атрибут tabindex для контролю порядку, в якому елементи отримують фокус.
• Використовуйте семантичний HTML: Використовуйте семантичні елементи HTML, такі як <label>, <input>, <button> та <fieldset>, щоб надати структуру та значення вашій формі.
• Надавайте чіткі мітки: Використовуйте чіткі та описові мітки для всіх полів форми. Пов'язуйте мітки з відповідними полями вводу за допомогою атрибута for.
• Використовуйте достатній контраст: Переконайтеся, що між кольорами тексту та фону є достатній контраст. Використовуйте перевірку контрастності кольорів, щоб переконатися, що ваші кольори відповідають рекомендаціям щодо доступності.
• Тестуйте з допоміжними технологіями: Тестуйте вашу форму з допоміжними технологіями, такими як програми зчитування з екрана, щоб переконатися, що вона зручна для людей з обмеженими можливостями.

Приклад з атрибутами ARIA:

            function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // Indicate if there's an error
        aria-describedby={error ? 'name-error' : null} // Associate error message
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

За межами базового використання: Просунуті техніки

Хоча базове використання useFormStatus є простим, існує кілька просунутих технік, які можуть ще більше покращити ваш досвід відправки форм:

• Кастомні індикатори завантаження: Замість простого спінера використовуйте більш візуально привабливий та інформативний індикатор завантаження. Це може бути панель прогресу, власна анімація або повідомлення, що надає контекст про те, що відбувається у фоновому режимі. Переконайтеся, що ваші власні індикатори завантаження є доступними та мають достатній контраст.
• Оптимістичні оновлення: Надавайте негайний зворотний зв'язок користувачеві, оптимістично оновлюючи інтерфейс користувача до отримання відповіді від сервера. Це може зробити форму більш чутливою та зменшити відчутну затримку. Однак не забудьте обробити можливі помилки та повернути інтерфейс до попереднього стану, якщо запит до сервера не вдався.
• Debouncing та Throttling: Використовуйте debouncing або throttling, щоб обмежити кількість запитів до сервера, що надсилаються, поки користувач вводить текст. Це може покращити продуктивність та запобігти перевантаженню сервера. Бібліотеки, такі як lodash, надають утиліти для debouncing та throttling функцій.
• Умовний рендеринг: Умовно рендеріть елементи форми на основі стану pending. Це може бути корисно для приховування або деактивації певних елементів під час відправки форми. Наприклад, ви можете приховати кнопку "Скинути", поки форма знаходиться в стані очікування, щоб запобігти випадковому скиданню форми користувачем.
• Інтеграція з бібліотеками для валідації форм: Інтегруйте useFormStatus з бібліотеками для валідації форм, такими як Formik або React Hook Form, для комплексного керування формами.

Вирішення поширених проблем

Під час використання useFormStatus ви можете зіткнутися з деякими поширеними проблемами. Ось як їх вирішити:

• Стан pending не оновлюється: Переконайтеся, що форма правильно пов'язана з серверною дією, і що серверна дія визначена належним чином. Перевірте, чи правильно встановлено атрибут `action` для елемента <form>.
• Стан error не заповнюється: Переконайтеся, що серверна дія повертає об'єкт помилки, коли виникає помилка. Серверна дія повинна явно повернути помилку або викинути її.
• Форма відправляється кілька разів: Деактивуйте кнопку відправки або поля вводу, поки форма знаходиться в стані очікування, щоб запобігти повторним відправкам.
• Форма не відправляє дані: Перевірте, чи правильно встановлено атрибут name для елементів форми. Переконайтеся, що серверна дія коректно розбирає дані форми.
• Проблеми з продуктивністю: Оптимізуйте свій код, щоб уникнути непотрібних перерендерів та зменшити обсяг оброблюваних даних.

Альтернативи useFormStatus

Хоча useFormStatus є потужним інструментом, існують альтернативні підходи до керування станом відправки форми, особливо в старих версіях React або при роботі зі складною логікою форм:

• Ручне керування станом: Використання useState та useEffect для ручного керування станом завантаження, станом помилки та даними форми. Цей підхід дає вам більше контролю, але вимагає більше шаблонного коду.
• Бібліотеки для форм: Використання бібліотек для форм, таких як Formik, React Hook Form або Final Form. Ці бібліотеки надають комплексні функції керування формами, включаючи валідацію, обробку відправки та керування станом. Ці бібліотеки часто надають власні хуки або компоненти для керування станом відправки.
• Redux або Context API: Використання Redux або Context API для глобального керування станом форми. Цей підхід підходить для складних форм, які використовуються в кількох компонентах.

Вибір підходу залежить від складності вашої форми та ваших конкретних вимог. Для простих форм useFormStatus часто є найпростішим та найефективнішим рішенням. Для більш складних форм бібліотека для форм або рішення для глобального керування станом може бути більш доречним.

Висновок

useFormStatus є цінним доповненням до екосистеми React, що спрощує керування станом відправки форми та дозволяє розробникам створювати більш захопливий та інформативний користувацький досвід. Розуміючи його можливості, найкращі практики та випадки використання, ви можете ефективно використовувати useFormStatus для створення доступних, інтернаціоналізованих та продуктивних форм для глобальної аудиторії. Використання useFormStatus оптимізує розробку, покращує взаємодію з користувачем і, зрештою, сприяє створенню більш надійних та зручних веб-додатків.

Не забувайте надавати пріоритет доступності, інтернаціоналізації та продуктивності при створенні форм для глобальної аудиторії. Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете створювати форми, якими зможе користуватися кожен, незалежно від його місцезнаходження чи можливостей. Такий підхід сприяє створенню більш інклюзивного та доступного вебу для всіх користувачів.